<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-26 14:44
 * Desc: 生日弹窗 BirthdayPop
 */
-->
<template>
  <view v-if="currentValue" class="birthday-pop">
    <!--#ifdef H5 || MP-WEIXIN  -->
    <u-datetime-picker
      :show="currentValue"
      v-model="birthday"
      mode="date"
      @confirm="onSave"
      @cancel="onClose"
      :max-date="new Date().getTime()"
      :min-date="new Date('1970-01-01').getTime()"
    ></u-datetime-picker>
    <!--#endif-->
    <!--#ifdef MP-ALIPAY || MP-TOUTIAO -->
    <view class="main">
      <view class="title">
        <view @click="onClose">取消</view>
        <view @click="onSave">确定</view>
      </view>
      <picker-view
        v-if="visible"
        :indicator-style="indicatorStyle"
        :value="valueData"
        @change="bindChange"
        class="picker-view"
      >
        <picker-view-column>
          <view class="item" v-for="(item, index) in years" :key="index"
            >{{ item }}年</view
          >
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in months" :key="index"
            >{{ item }}月</view
          >
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in days" :key="index"
            >{{ item }}日</view
          >
        </picker-view-column>
      </picker-view>
    </view>
    <!--#endif-->
  </view>
</template>
<script>
  import { dateFmt } from '@/utils/index'
  export default {
    name: 'BirthdayPop',
    props: {
      value: {
        type: Boolean,
        default: false
      },
      obj: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      const date = new Date()
      const years = []
      const year = 1990
      // const year = date.getFullYear()
      const months = []
      const month = date.getMonth() + 1
      const days = []
      const day = date.getDate()
      for (let i = 1990; i <= date.getFullYear(); i++) {
        years.push(i)
      }
      for (let i = 1; i <= 12; i++) {
        months.push(i)
      }
      for (let i = 1; i <= 31; i++) {
        days.push(i)
      }
      console.log('birthday', this.obj, new Date(this.obj.birthday))
      return {
        title: 'picker-view',
        years,
        year,
        months,
        month,
        days,
        day,
        valueData: [1000, month - 1, day - 1],
        visible: true,
        indicatorStyle: `height: 50px;`,
        birthday: Number(new Date(this.obj.birthday)) || ''
      }
    },
    methods: {
      onSave(e) {
        this.$msg.showModal('生日仅可修改一次,是否确认修改?').then(() => {
          const t = dateFmt(e.value, 'YYYY-MM-DD')

          console.log('valueData', e.value, t)
          //#ifdef H5 || MP-WEIXIN
          this.$emit('setMemberData', { birthday: t })
          //#endif
          //#ifdef MP-ALIPAY || MP-TOUTIAO
          this.$emit('setMemberData', {
            birthday: this.year + '-' + this.month + '-' + this.day
          })
          //#endif
          this.onClose()
        })
      },
      onClose() {
        this.$emit('input', false)
      },
      bindChange: function (e) {
        console.log('bindChange', e)
        const val = e.detail.value
        this.year = this.years[val[0]]
        this.month = this.months[val[1]]
        this.day = this.days[val[2]]
      }
    },
    computed: {
      currentValue: {
        get() {
          return this.value
        },
        set(v) {
          this.$emit('input', v)
        }
      }
    }
  }
</script>
<style>
  .picker-view {
    position: absolute;
    bottom: 0;
    width: 750rpx;
    height: 600rpx;
    background: white;
  }
  .item {
    height: 50px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .main {
    position: fixed;
    inset: 0px;
    z-index: 10070;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .title {
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    bottom: 600rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 20rpx;
  }
</style>
